<template>
    <!-- 知情同意书 -->
    <div class="app-container">
        <div class="head-container">
            <div class="head-info">
                <div><strong>{{ patientInfo.patientName }}</strong></div>
                <div>{{ patientInfo.gender ? '男' : '女' }} {{ patientInfo.age }} 岁</div>
                <div>{{ patientInfo.admissionNum }}</div>
            </div>

            <div class="head-btn">
                <el-button type="primary"  v-show="fromHistory" size="mini" @click="clickSave('form')">保存</el-button>
                <el-button type="primary" size="mini" @click="clickBack('form')">返回</el-button>
            </div>
        </div>

        <div class="body">
            <h1>(高压氧治疗)</h1>
            <h2>
                这是一份关于
                <i>高压氧治疗</i>
                的知情同意书，医生会用通俗易懂的方式告知该诊疗相关事宜。
            </h2>

            <ul>
                <li><strong>目前诊断:</strong></li>
                <li>1.偏瘫(右侧)</li>
                <li>2.气管造口状态</li>
                <li>3.脑出血术后</li>
                <li>4.高血压病</li>
                <li>5.肺部感染</li>
                <li>6,多形性红斑</li>
                <li>7.2型糖尿病</li>
                <li>8.肝占位性病变</li>
                <li>9.痛风</li>
            </ul>

            <p>
                <strong>检查及治疗目的:</strong> <br />
                <el-checkbox-group v-model="treatmentInformedInfo.treatmentTarget" :disabled="!fromHistory">
                    <el-checkbox :label="1">明确病因，完善诊断</el-checkbox>
                    <el-checkbox :label="2">确定治疗方案，判定预后</el-checkbox>
                    <el-checkbox :label="3">对症治疗，缓解病情</el-checkbox>
                    <el-checkbox :label="4">其他</el-checkbox>
                </el-checkbox-group>
            </p>
            <div>
                <strong>主要意外、风险及并发症:</strong>
                <el-checkbox-group v-model="treatmentInformedInfo.coreRisk"  :disabled="!fromHistory">
                    <el-checkbox :label="1">1、压力不适应诱发中耳炎，发生中耳、副鼻实气压伤，正常耳朵听力的一过性下降。</el-checkbox><br />
                    <el-checkbox :label="2">2、个体差异引起的氧过敏、氧中毒、减压病等。</el-checkbox><br />
                    <el-checkbox
                        :label="3">3、昏迷、癫痫、哮喘或者普通病人在减压时呼吸不当引起的肺气压伤昏迷、咳嗽反射差的病人因呕吐物、痰液或其它分泌物堵塞气道导致室息。</el-checkbox><br />
                    <el-checkbox :label="4">4、新近手术病人出现切口部位皮下气肿，胸科病人引起气胸。</el-checkbox><br />
                    <el-checkbox :label="5">5、颇底骨骨折病人出现气颅或脑出血。</el-checkbox><br />
                    <el-checkbox :label="6">6、脑梗塞病人由于血压波动引起脑出血或再发脑梗塞;脑出血病人出血范围扩大或新发脑出血。</el-checkbox><br />
                    <el-checkbox
                        :label="7">7、冠心病、房颤或者颈部、四肢血管壁上有斑块附着的患者，发生斑块脱落和心、肺、脑血管栓塞，导致冠心病复发、肺栓塞，脑卒中等，严重时直接危及生命。</el-checkbox><br />
                    <el-checkbox :label="8">8、有心肺疾病或者潜在性心肺疾病的患者在舱内突发呼吸、心跳骤停，危及生命。</el-checkbox><br />
                    <el-checkbox :label="9">9、患者在舱内突发癫痫，哮喘患者舱内突发哮喘，鼓膜畸形或损伤患者突发鼓膜穿孔。</el-checkbox><br />
                    <el-checkbox :label="10">10、高压氧对患儿的视神经有一定的毒性作用，有可能导致患儿双目失明。</el-checkbox><br />
                    <el-checkbox
                        :label="11">11、在高压氧治疗过程中，也可能发生非高压氧因素导致的原发病复发，如脑卒中、冠心病，心律失常、癫痈、哮喘、自发性气胸等。</el-checkbox><br />
                    <el-checkbox :label="12">12、其他不可预料的意外、风险及并发症的发生。</el-checkbox><br />
                    <el-checkbox :label="13">13、以上情况可能较轻，也可能很重，甚至导致残疾或者死亡。</el-checkbox><br />
                </el-checkbox-group>
            </div>

            <div>
                <strong>防范措施:</strong>
                <p>1、严格按照诊疔操作规范执行。</p>
                <p>2、为了保证治疗安全，新病人高压氧治疗前三天需常规心电,监护监测，如有异常需医生评估后决定。危重愚者及生命体征不稳定的患者，需要常规持续监护。</p>
                <p>3、加强监测，仔细操作，及时处理。</p>
                <p>4、其他:必须知晓和严格遵守高压氧安全治疗的如下规定:</p>
                <div class="else">
                    <p>①病人进舱治疗必须服从医护人员的交排和指导，共同完成治疗任务。</p>
                    <p>②严禁将火柴、打火机、收音机、助听器、电子表、手机等一切可能引起火花的物品带入舱内。<strong>除上述物品外病人及陪同入舱人员一律穿医院定制的全棉衣裤，自己的衣裤严禁穿、带入舱内，包括女性患者的胸置及男女性患者的短裤和袜子。患者治疗前必须清洗头发，清除发油、发胶、口红、指甲油等化妆品。</strong>有创口的患者禁用油类敷料。
                    </p>
                    <p>③病人进舱前必须做好准备工作:如解好大、小便，正确握吞及鼓子的衡压动作。</p>
                    <p>④病人及陪舱人员在舱内治疗时，不准随便吐痰及乱丢果皮纸屑，保持舱内卫生，避免病菌传染。</p>
                    <p>⑤舱内设各不准随意乱动，如有损坏，照价赔偿设备及其人工维修和校验费用。</p>
                </div>
            </div>
            <div id="operation">
                <el-form :model="treatmentInformedInfo" ref="form" label-width="100px" inline :rules="rules" label-position="left">
                    <!-- requireds -->
                    <el-form-item label="患方签名:" prop="signName">
                        <span v-if="!fromHistory" >
                            {{ treatmentInformedInfo.signName }}
                        </span>
                        <!-- <img v-if="!fromHistory" :src="treatmentInformedInfo.signName" /> -->
                        <el-input v-else v-model="treatmentInformedInfo.signName" class="width-150" @input="handleDate"/>
                    </el-form-item>

                    <el-form-item label="患方指纹:" prop="fingerprint" class="marginLeft-40">
                        <!-- <img v-if="!fromHistory" :src="treatmentInformedInfo.fingerprint" />  -->
                        <span v-if="!fromHistory" >
                            {{ treatmentInformedInfo.fingerprint }}    
                        </span> 
                        <el-input v-else v-model="treatmentInformedInfo.fingerprint" class="width-150" />
                    </el-form-item>

                    <br />
                    <el-form-item label="与患者关系:" prop="dicPatientRelation">
                        <span v-if="!fromHistory">{{ treatmentInformedInfo.dicPatientRelationName }}</span>
                        <!-- <span v-else>{{ treatmentInformedInfo.dicPatientRelationName }}</span> -->

                        <el-select v-else v-model="treatmentInformedInfo.dicPatientRelation" class="width-150">
                            <el-option v-for="item in relation" :key="item.itemCode" :label="item.itemName"
                                :value="item.itemCode" />
                        </el-select>

                    </el-form-item>

                    <el-form-item label="签名时间:" required class="marginLeft-40">
                        <span>{{ treatmentInformedInfo.signTime }}</span>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
import { dictionariesSearch } from '@/api/residentPhysician/cureBilling.js'
import moment from 'moment'
export default {
    props: ['treatmentInformedInfo', 'patientInfo', 'fromHistory'],
    data() {
        return {
            rules: {
                signName: [
                    { required: true, message: '患者签名不能为空' },
                ],
                fingerprint: [
                    { required: true, message: '该项不能为空' },
                ],
                dicPatientRelation: [
                    {required: true, message: '该项不能为空', trigger: 'change' },
                ]
            },
            checkCureTarget: [],  //检查及治疗目的
            mainRisk: [],  //主要风险
            relation: [],  //与患者关系
            relationMap: {},  //与患者关系
        };
    },
    computed: {
        isReviseBtn() {
            return this.$store.state.common.isReviseBtn;
        },
    },
    methods: {
        //点击保存
        clickSave(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.treatmentInformedInfo.isSave = true;
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success'
                    });
                    this.$emit('close');
                } else {
                    this.$notify({
                        title: '警告',
                        message: '请满足所有条件后再提交',
                        type: 'warning'
                    });
                }
            });
        },
        //点击返回
        clickBack(formName) {
            if(this.treatmentInformedInfo.isSave == true){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('close');
                    } else {
                        this.$notify({
                            title: '警告',
                            message: '请满足所有条件后再退出',
                            type: 'warning'
                        });
                        return ;
                    }
                });
                return ;
            }
            this.$emit('close');
        },
        // 签名状态改变的时候 签名时间改变
        handleDate(){
            this.treatmentInformedInfo.signTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss') 
        },
        //查询与患者关系
        getRelation() {
            let params = {
                dicCode: 'dicPatientRelation'
            }
            dictionariesSearch(params).then(response => {
                let { code, content } = response;
                if (code === 0 && content) {
                    this.relation = content[0].itemList;
                    if (this.relation && this.relation.length) {
                        this.relation.forEach(item => this.relationMap[item.itemCode] = item.itemName);
                    }
                } else {
                    this.relation = [];
                }
            }).catch(err => {
                console.log(err);
            })
        },
        initDate() {
            //签名时间
            if (this.treatmentInformedInfo.signTime) {
                this.treatmentInformedInfo.signTime = moment(this.treatmentInformedInfo.signTime).format('YYYY-MM-DD HH:mm:ss')
            }else{
                this.treatmentInformedInfo.signTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')                
            }

            if (this.treatmentInformedInfo.coreRisk && !Array.isArray(this.treatmentInformedInfo.coreRisk)) {
                this.treatmentInformedInfo.coreRisk = this.treatmentInformedInfo.coreRisk.split(',').map(item => Number(item));
            }
            if (this.treatmentInformedInfo.treatmentTarget && !Array.isArray(this.treatmentInformedInfo.treatmentTarget)) {
                this.treatmentInformedInfo.treatmentTarget = this.treatmentInformedInfo.treatmentTarget.split(',').map(item => Number(item));
            }
        }
    },

    mounted() {
        this.getRelation();
        this.initDate();
        console.log(this.treatmentInformedInfo,456);
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    background-color: #fff;
    padding-bottom: 0;

    .width-80 {
        width: 80px;
    }

    .width-120 {
        width: 120px;
    }

    .width-150 {
        width: 150px;
    }

    .width-180 {
        width: 180px;
    }

    .head-container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .head-info {
            display: flex;
            justify-content: start;
            align-items: center;
        }

        .head-info>div {
            margin: 0 15px;
        }

        .head-btn {
            .el-button {
                margin: 0 10px;
            }
        }
    }

    .body {
        width: 100%;
        padding-bottom: 10px;
        margin: auto;
        color: #333;

        h1 {
            text-align: center;
            font-size: 22px;
        }

        h2 {
            font-size: 16px;
            text-indent: 2em;

            i {
                font-size: normal;
                text-decoration: underline;
            }
        }

        p,
        strong {
            font-size: 16px;
            text-align: left;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                font-size: 16px;
                margin: 0 5px;
            }
        }

        ::v-deep .el-checkbox__label {
            font-size: 16px;
            color: #333;
            vertical-align: text-top;
            white-space: normal;
            word-break: break-all;
            width: 100%;
            margin: 2px 0;
        }

        ul>li {
            list-style: none;
        }

        .else {
            padding-left: 100px;
        }


        #operation {
            height: 150px;
            padding-top: 20px;

            .marginLeft-40 {
                margin-left: 40px;
            }
        }


    }
}
</style>